<template>
  <!-- 工单工序时长统计 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="auto">
      <el-form-item label="产品系列" prop="series">
        <el-select v-model="queryParams.series" placeholder="请选择产品系列" clearable>
          <el-option v-for="item in seriesDict" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单编号" prop="workorderCode">
        <el-input v-model="queryParams.workorderCode" placeholder="请输入工单编号" />
      </el-form-item>
      <el-form-item label="月份" prop="reportMonth">
        <el-date-picker v-model="queryParams.reportMonth" type="month" value-format="yyyy-MM" placeholder="选择月">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" height="calc(100vh - 240px)" border style="margin-bottom: 16px">
      <el-table-column prop="reportMonth" label="月份"></el-table-column>
      <el-table-column prop="workorderCode" label="工单编号"></el-table-column>
      <el-table-column prop="workorderStatus" label="工单状态"></el-table-column>
      <el-table-column prop="quantity" label="工单数量"></el-table-column>
      <el-table-column prop="series" label="产品系列"></el-table-column>
      <el-table-column prop="productCode" label="物料编码"></el-table-column>
      <el-table-column prop="productName" label="物料名称"></el-table-column>
      <el-table-column prop="productSpc" label="规格型号"></el-table-column>
      <el-table-column prop="lineName" label="产线"></el-table-column>
      <el-table-column prop="durationMinute" label="工时(分钟)"></el-table-column>
      <el-table-column prop="duration" label="工时"></el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      :page-sizes="[50, 100, 200, 300, 400, 500]" @pagination="getList" />
    <!--工单工序时长统计-行-详情-->
    <el-dialog :title="formTitle" :visible.sync="formConfOpen">
      <div>
        <el-table v-loading="loading2" :data="tableData2" height="calc(100vh - 240px)" border
          style="margin-bottom: 16px">
          <el-table-column prop="reportMonth" label="月份"></el-table-column>
          <el-table-column prop="workorderCode" label="工单编号"></el-table-column>
          <el-table-column prop="snCode" label="SN码"></el-table-column>
          <el-table-column prop="durationMinute" label="工时(分钟)"></el-table-column>
          <el-table-column prop="duration" label="工时"></el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail2(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectWorkordersDuration,
  selectOneWorkorderDuration,
} from "@/api/mes/report/processHoursStatiste.js";
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      tableData: [],
      seriesDict: [
        { label: "电桩产品", value: "电桩产品" },
        { label: "车载产品", value: "车载产品" },
        { label: "储能产品", value: "储能产品" },
        { label: "控制产品", value: "控制产品" },
      ],
      formTitle: "",
      formConfOpen: false,

      loading2: false,
      queryParams2: {
        pageNum: 1,
        pageSize: 50,
      },
      total2: 0,
      tableData2: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.tableData = [];
      const param = { ...this.queryParams };
      selectWorkordersDuration(param)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          this.tableData = [];
          this.loading = false;
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    /** 表单配置信息 */
    handleDetail(row) {
      this.formConfOpen = true;
      this.formTitle = "工单工序时长统计详细";
      let param = { ...this.queryParams2 };
      param["reportMonth"] = row.reportMonth;
      param["series"] = row.series;
      param["workorderCode"] = row.workorderCode;
      this.getList2(param);
    },
    getList2(param) {
      this.loading2 = true;
      this.tableData2 = [];
      selectOneWorkorderDuration(param)
        .then((res) => {
          this.tableData2 = res.rows;
          this.total2 = res.total;
          this.loading2 = false;
        })
        .catch((err) => {
          this.tableData2 = [];
          this.loading2 = false;
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "mes/mobile/failsafe/export/workordersDuration",
        {
          ...this.queryParams,
        },
        `工单工序时长统计_${new Date().getTime()}.xlsx`,
        null,
        "post"
      );
    },
  },
};
</script>
